<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button  size="mini" type="plain" @click="editing=!editing" class="editBtn">
            {{ editing ? '取消':'编辑'}}
          </van-button>
      </van-cell>
      <van-grid>
        <!-- 渲染数据 -->
        <!-- :class="{'cur':条件}" 如果条件成立，就会添加-->
        <van-grid-item
        v-for="(item,idx) in channels"
        :key="item.id"
        @click="hClickMyChannel(idx)"
        :class="{'cur':curIndex === idx}">
          <span>{{item.name}}</span>
          <!-- 我的频道 上的销减按钮 (只有在编辑状态时，才可见)-->
          <!-- 推荐频道的id一直是0 -->
          <van-icon v-show="editing && item.id!==0" name="cross" icon-size="16px" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>

     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
         <!-- 渲染数据 -->
        <van-grid-item
        v-for="item in recommendChannels"
        :key="item.id"
        @click="hAddChannel(item)">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  // props: ['channels', 'channelId'],
  props: {
    channels: {
      type: Array, // 类型
      required: true // 是否必须要传入
    },
    curIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      editing: false, // 是否处于编辑状态
      allChannels: [] // 所有的频道
    }
  },
  created () {
    this.loadAllChannels()
  },
  computed: {
    // 可选频道
    recommendChannels () {
      // this.allChannels - this.channels
      /* 本质：从一个数组减去另一个数组 */
      const result = this.allChannels.filter(channel => {
        // 只留下 没有在 我的频道 中的数据
        /* channels 是个数组，item 表示数组中的元素 */
        const idx = this.channels.findIndex(item => item.id === channel.id)
        if (idx === -1) {
          // 没有找到（filter过滤器）
          return true
        } else {
          return false
        }
      })
      return result
    }
  },
  methods: {
    // 用户在 可选频道 上做一次点击
    async hAddChannel (channel) {
      // 1.组装参数 (改造成api要的格式)
      //  在用户原来的订阅频道的基础上，添加这个频道
      let curChannelList = [...this.channels, channel]
      curChannelList = curChannelList.map((item, idx) => {
        return {
          id: item.id,
          seq: idx
        }
      })
      // 去掉推荐频道（由于推荐频道是在第一个位置，所以这里直接删除）
      curChannelList.splice(0, 1)
      // console.log(curChannelList)
      // 2. 调用接口
      const result = await addChannel(curChannelList)
      console.log(result)
      // 3. 更新视图
      /*
          1） 修改已订阅频道：多出一项
          2） 修改  可选频道：减少一项
          3)由于计算属性recommandChannel的计算过程依赖于this.channels，
          当this.channels变化时 计算属性会重新执行，所以 可选频道会自动减少一项

          它会修改父组件中channels。
          原因是channels本身就是通过props传递过来的引用类型的数据会直接导致父组件中的频道列表多出一项
      */
      this.channels.push(channel)
    },
    // 用户点击了 我的频道（要做频道跳转，通知父组件）
    /*
      1. 如果是普通状态，则是切换频道
          目标： 1）关闭弹层；2）切换到当前点击的频道上去
          这两件事，都应该是父组件来做
      2. 如果是编辑状态，则是删除频道
    */
    async hClickMyChannel (idx) {
      if (this.editing) {
        // 删除频道
        if (idx === 0) { // 推荐频道 不能被删除
          return
        }
        // 1.请求接口（不再订阅这个频道）
        const result = await deleteChannel(this.channels[idx].id)
        console.log(result)
        // 2.更新视图（从已订阅的频道中删除当前项）
        // const idx = this.channels.findIndex(item => item.id === channel.id)
        // if (idx !== -1) {
        this.channels.splice(idx, 1)
        // }
        // 修复Bug
        if (idx < this.curIndex) {
          this.$emit('fixedIndex', this.curIndex - 1)
        }
      } else {
        // 抛出事件
        this.$emit('updateCurChannel', idx)
      }
    },
    // 获取所有的频道
    async loadAllChannels () {
      const result = await getAllChannels()
      // 保存
      this.allChannels = result.data.data.channels
    }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
  }
  // 由于这里有scoped，它是局部样式
  // 在局部样式中要覆盖组件的样式，需要使用 /deep/
  /* .channel /deep/ .van-icon{
    font-size:12px;
    color: blue;
  } */
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
  // 高亮显示当前的频道
  .cur{
    color:#03ccbb;
    font-weight: bold;
  }
  .editBtn{
    color:rgb(229,97,91)!important;
    margin-right: 10px;
    padding: 0 10px;
    border-color: rgb(229,97,91);
  }
</style>
